<template>
    <van-sticky>
        <van-nav-bar title="课程详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="box">
            <h2>{{ course.courseName }}</h2>
            <p>讲师：{{ course.createUser }}</p>
        </div>
    </van-sticky>
    <div class="box2">
        <van-tabs>
            <van-tab title="课件">
                <van-collapse v-model="activeNames">
                    <van-collapse-item title="标题1" name="1">
                        <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
        <van-cell v-for="(item, index) in catalogueList" :key="item.id" :label="'时长 '+ item.durationTime" center @click="playVideoHandle(item,index)" is-link>
          <template #title>
            <span>{{ item.catalogueName }}&nbsp;&nbsp;</span>
            <van-tag v-if="item.isLock===1" type="danger">试听</van-tag>
          </template>
        </van-cell>
      </van-list> -->
                    </van-collapse-item>
                </van-collapse>
            </van-tab>
            <van-tab title="考核">
                <div class="exam" @click="toExam(item.id)" v-for="(item, index) in examList" :key="index">
                    <div class="examBox">
                        <div class="left">
                            <h4>{{ item.name }}</h4>
                            <van-tag plain type="primary">{{ item.paperType === "1" ? '固定试卷' : item.paperType === "4" ? '时段试卷' : "任务试卷" }}</van-tag>

                        </div>
                        <div class="right">
                            <van-button round type="primary">参加</van-button>
                        </div>
                    </div>
                </div>

            </van-tab>
        </van-tabs>
    </div>
</template>
<script setup lang='ts'>
import { ref, onUnmounted, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getCourseDetail, getExam, getSection } from '../api/api';
import $bus from "../config/eventBus";
const loading = ref(false);
const finished = ref(false);
//  刷新
let loadingTag = ref<boolean>(true);
// 获取传递的 通知的 id 值
const router = useRouter();
// 可以使用 route 来获取 参数值
const route = useRoute();
// 获取课程信息/考试列表
const course = ref<any>([])
const section = ref<any>([])
const examList = ref<any>([])
onMounted(async () => {
    const datas = {}
    const ret = await getCourseDetail(route.query.params as string);
    const rea = await getSection(route.query.params as string);
    const ret1 = await getExam(route.query.params as string);
    console.log("course", ret)
    console.log("section", rea)
    console.log("exam", ret1)
    if (ret.data.code === 0) {
        course.value = ret.data.data
    } else {
        return false
    }
    if (rea.data.code === 0) {
        section.value = rea.data.data
    } else {
        return false
    }
    if (ret1.data.code === 0) {
        examList.value.push(...ret1.data.data.data)
    } else {
        return false
    }
});

// 文件预览
// let files= new URL("../assets/111.txt",import.meta.url).href
let iframeUrl = ref('')
function yulan() {
    //文档转换地址http://view.xdocin.com/xdoc?_xdoc=
    let url = 'http://view.xdocin.com/xdoc?_xdoc=' + 'files'
    iframeUrl.value = url
}
const activeNames = ref(['1']);

const toExam = (examId: any) => {
    // 进行路由跳转
    router.push({ path: "/exam", query: { params: examId } })
};

//  返回上一页
const onClickLeft = () => history.back();
//不要tabBar
onMounted(() => {
    $bus.emit("tabBarHide", false);
})
//页面离开记得销毁
onUnmounted(() => {
    $bus.emit("tabBarHide", true);
})
</script>
        
<style scoped lang='scss'>
.b1 {
    background-color: lightgrey;
}

.box {
    height: 100px;
    width: 100%;
    background-color: rgb(27, 212, 212);
    padding: 15px;

    h2 {
        margin: 0;
    }

}

.box2 {
    height: 100%;
    margin: 0;
    padding: 0;
}

.examBox {
    padding: 0;
    margin: 15px;
    height: 100px;
    background-color: #f6f0f0;
    border-radius: 20px;


    .left {
        width: 70%;
        margin-left: 15px;
        float: left;
    }

    .right {
        width: 20%;
        float: right;
        margin-top: 20px;
        margin-right: 15px;
    }
}</style>